<!--<!DOCTYPE html>-->
<!--<html>-->

<!--    <head>-->
<!--        <meta charset="utf-8">-->
<!--        <title>Java后端WebSocket的Tomcat实现</title>-->
<!--        <script type="text/javascript" src="js/jquery.min.js"></script>-->
<!--    </head>-->

<!--<body>-->
<!--<div id="main" style="width: 1200px;height:800px;"></div>-->
<!--Welcome<br/><input id="text" type="text" />-->
<!--<button onclick="send()">发送消息</button>-->
<!--<hr/>-->
<!--<button onclick="closeWebSocket()">关闭WebSocket连接</button>-->
<!--<hr/>-->
<!--<div id="message"></div>-->
<!--</body>-->
<!--<script type="text/javascript">-->
<!--    var websocket = null;-->
<!--    //判断当前浏览器是否支持WebSocket-->
<!--    if('WebSocket' in window) {-->
<!--        //改成你的地址-->
<!--        websocket = new WebSocket("ws://localhost:8080/api/websocket/100");-->
<!--    } else {-->
<!--        alert('当前浏览器 Not support websocket')-->
<!--    }-->

<!--    //连接发生错误的回调方法-->
<!--    websocket.onerror = function() {-->
<!--        setMessageInnerHTML("WebSocket连接发生错误");-->
<!--    };-->

<!--    //连接成功建立的回调方法-->
<!--    websocket.onopen = function() {-->
<!--        setMessageInnerHTML("WebSocket连接成功");-->
<!--    }-->
<!--    var U01data, Uidata, Usdata-->
<!--    //接收到消息的回调方法-->
<!--    websocket.onmessage = function(event) {-->
<!--        console.log(event);-->
<!--        setMessageInnerHTML(event);-->
<!--        setechart()-->
<!--    }-->

<!--    //连接关闭的回调方法-->
<!--    websocket.onclose = function() {-->
<!--        setMessageInnerHTML("WebSocket连接关闭");-->
<!--    }-->

<!--    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。-->
<!--    window.onbeforeunload = function() {-->
<!--        closeWebSocket();-->
<!--    }-->

<!--    //将消息显示在网页上-->
<!--    function setMessageInnerHTML(innerHTML) {-->
<!--        document.getElementById('message').innerHTML += innerHTML + '<br/>';-->
<!--    }-->

<!--    //关闭WebSocket连接-->
<!--    function closeWebSocket() {-->
<!--        websocket.close();-->
<!--    }-->

<!--    //发送消息-->
<!--    function send() {-->
<!--        var message = document.getElementById('text').value;-->
<!--        websocket.send('{"msg":"' + message + '"}');-->
<!--        setMessageInnerHTML(message + "&#13;");-->
<!--    }-->
<!--</script>-->

<!--</html>-->





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket通讯2</title>
</head>

<script type="text/javascript">
    let websocket = null;
    function openSocket() {
        //判断当前浏览器是否支持WebSocket, 主要此处要更换为自己的地址
        if ('WebSocket' in window) {
            let url = "http://localhost:10010/api/websocket/0";
            url = url.replace("https", "ws").replace("http", "ws");
            if (websocket == null) {
                websocket = new WebSocket(url);
            }

            //连接发生错误的回调方法
            websocket.onerror = function() {
                setMessageInnerHTML("error");
            };

            //连接成功建立的回调方法
            websocket.onopen = function(event) {
                console.log("websocket已打开");
            }

            //接收到消息的回调方法
            websocket.onmessage = function(event) {
                setMessageInnerHTML(event.data);
            }

            //连接关闭的回调方法
            websocket.onclose = function() {
                setMessageInnerHTML("close");
            }

            //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function() {
                websocket.close();
            }

            //将消息显示在网页上
            function setMessageInnerHTML(innerHTML) {
                document.getElementById('message').innerHTML += innerHTML + '<br/>';
            }
        }else {
            console.log("您的浏览器不支持websocket!!!")
        }
    }

    //关闭连接
    function closeWebSocket() {
        if (websocket != null){
            websocket.close();
            websocket = null;
        }
    }

    //发送消息
    function send() {
        const message = document.getElementById('text').value;
        websocket.send('{"message":"' + message + '"}');
    }
</script>
<body>
msg:<input id="text" type="text" />
<p>【操作】：<button type="button" onclick="openSocket()">openSocket</button></p>
<p>【操作】：<button type="button" onclick="send()">发送消息</button></p>
<p>【操作】：<button type="button" onclick="closeWebSocket()">Close</button></p>

<div id="message"></div>

</body>
</html>
